Created:13/01/2019
By: TeamXcel
Thank you for purchasing our landing page. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The landing page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!doctype html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Alison portfolio template"> <meta name="author" content="ThemeEaster"> <title>Alison | Show Your Work</title> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png"> <!-- Font Awesome CSS --> <link rel="stylesheet" href="css/font-awesome.min.css"> <!-- Themify Icons CSS --> <link rel="stylesheet" href="css/themify-icons.css"> <!-- Elegant Font Icons CSS --> <link rel="stylesheet" href="css/elegant-font-icons.css"> <!-- Elegant Line Icons CSS --> <link rel="stylesheet" href="css/elegant-line-icons.css"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Venobox CSS --> <link rel="stylesheet" href="css/venobox/venobox.css"> <!-- Slicknav CSS --> <link rel="stylesheet" href="css/slicknav.min.css"> <!-- animate CSS --> <link rel="stylesheet" href="css/animate.min.css"> <!-- simpletextrotator CSS --> <link rel="stylesheet" href="css/simpletextrotator.css"> <!-- OWL-Carousel CSS --> <link rel="stylesheet" href="css/owl.carousel.css"> <!-- Main CSS --> <link rel="stylesheet" href="css/main.css"> <!-- Responsive CSS --> <link rel="stylesheet" href="css/responsive.css"> <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> </head> <body data-spy="scroll" data-target="#navmenu" data-offset="70"> <!--[if lt IE 8]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <div class="site-preloader-wrap"> <div class="spinner"></div> </div><!-- Preloader --> <header id="header" class="header-section"> <div class="container"> <nav class="navbar"> <a href="#" class="navbar-brand"><img src="img/logo.png" alt="Alison"></a> <div class="d-flex menu-wrap"> <div id="navmenu" class="mainmenu"> <ul class="nav"> <li ><a data-scroll class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a></li> <li><a data-scroll class="nav-link" href="#about">About</a></li> <li><a data-scroll class="nav-link" href="#services">Services</a></li> <li><a data-scroll class="nav-link" href="#works">Works</a></li> <li><a data-scroll class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> </div> </header> <!-- Header --> <section id="home" class="section hero-section d-flex align-items-center"> </section><!-- hero-section --> <section id="about" class="about-section bg-dark"> </section><!-- about-section --> <section id="services" class="service-section padding"> </section><!-- service-section --> <section id="works" class="portfolio-section bg-dark"> </section><!-- portfolio-section --> <section class="cta-section padding"> </section><!-- cta-section --> <section id="contact" class="contact-section bg-dark"> <div class="container-fluid"> <div class="row contact-wrap"> </div> </div> <div id="google-map"></div><!-- /#google-map --> </section><!-- contat-section --> <footer class="footer-section align-center"> <div class="container"> <p>© 2019 Alison Powered by TeamXcel</p> </div> </footer><!-- /.footer_section --> <a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a> <!-- jQuery Lib --> <script src="js/vendor/jquery-1.12.4.min.js"></script> <!-- Bootstrap JS --> <script src="js/vendor/bootstrap.min.js"></script> <!-- Tether JS --> <script src="js/vendor/tether.min.js"></script> <!-- Slicknav JS --> <script src="js/vendor/jquery.slicknav.min.js"></script> <!-- OWL-Carousel JS --> <script src="js/vendor/owl.carousel.min.js"></script> <!-- Smooth Scroll JS --> <script src="js/vendor/smooth-scroll.min.js"></script> <!-- Venobox JS --> <script src="js/vendor/venobox.min.js"></script> <!-- Text Rotator JS --> <script src="js/vendor/jquery.simple-text-rotator.js"></script> <!-- Wow JS --> <script src="js/vendor/wow.min.js"></script> <!-- Google Map JS --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGm_weV-pxqGWuW567g78KhUd7n0p97RY"></script> <!-- Contact JS --> <script src="js/contact.js"></script> <!-- Main JS --> <script src="js/main.js"></script> </body> </html>
The site is made of many sections like header, slider, testimonials, services and more...
<header id="header" class="header-section"> <div class="container"> <nav class="navbar"> <a href="#" class="navbar-brand"><img src="img/logo.png" alt="Alison"></a> <div class="d-flex menu-wrap"> <div id="navmenu" class="mainmenu"> <ul class="nav"> <li ><a data-scroll class="nav-link active" href="#home">Home <span class="sr-only">(current)</span></a></li> <li><a data-scroll class="nav-link" href="#about">About</a></li> <li><a data-scroll class="nav-link" href="#services">Services</a></li> <li><a data-scroll class="nav-link" href="#works">Works</a></li> <li><a data-scroll class="nav-link" href="#contact">Contact</a></li> </ul> </div> </div> </nav> </div> </header> <!-- Header -->
<section id="home" class="section hero-section d-flex align-items-center"> <div class="container"> <div class="hero-content text-center"> <h5>WEB DEVELOPER & UX DESIGNER</h5> <h1><span class="rotate">Creativity, Designing, Developing</span></h1> <p>I’m a Creative Designer and I make things work.<br> Turning your dreams into reality.</p> <ul class="social-link"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-instagram"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-behance"></i></a></li> </ul> </div> </div> <div class="down-arrow"> <a data-scroll href="#about" class="arrow-animated">Scroll Down <i class="ti-arrow-down"></i></a> </div> </section><!-- hero-section -->
<section id="about" class="about-section bg-dark"> <div class="container-fluid"> <div class="row about-wrap"> <div class="col-md-6"> <div class="about-content pdl-80"> <div class="section-heading mb-20"> <h2>About Us</h2> </div> <p>I’m a Graphic Designer and I make things work.without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p> <p> Completely synergize resource taxing relationships premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.</p> <a href="#" class="default-btn">See Our Works</a> </div> </div> <div class="col-md-6"> <img src="img/about-background.jpg" alt="image"> </div> </div> </div> </section><!-- about-section -->
<section id="services" class="service-section padding"> <div class="container-fluid"> <div class="row service-area d-flex align-items-center"> <div class="col-lg-4 col-md-3 xs-padding"> <div class="section-heading pdl-80"> <h2 class="mb-20">Services</h2> <p class="mb-20">I’m a Creative Designer and I make things work.<br> Turning your dreams into reality.</p> </div> </div> <div class="col-lg-7 col-md-9 xs-padding"> <div class="row service-wrap"> <div class="col-md-4 col-sm-6 pd-15"> <div class="service-content"> <i class="icon-layers"></i> <h3>Interface Design</h3> <p>Lorem Ipsum is simply more dummy the industry.</p> </div> </div><!-- Service-1 --> <div class="col-md-4 col-sm-6 pd-15"> <div class="service-content"> <i class="icon-tools"></i> <h3>Themes Development</h3> <p>Lorem Ipsum is simply more dummy the industry.</p> </div> </div><!-- Service-2 --> <div class="col-md-4 col-sm-6 pd-15"> <div class="service-content"> <i class="icon-bargraph"></i> <h3>Content Marketing</h3> <p>Lorem Ipsum is simply more dummy the industry.</p> </div> </div><!-- Service-3 --> <div class="col-md-4 col-sm-6 pd-15"> <div class="service-content"> <i class="icon-phone"></i> <h3>Mobile Apps</h3> <p>Lorem Ipsum is simply more dummy the industry.</p> </div> </div><!-- Service-4 --> <div class="col-md-4 col-sm-6 pd-15"> <div class="service-content"> <i class="icon-bike"></i> <h3>Responsive Design</h3> <p>Lorem Ipsum is simply more dummy the industry.</p> </div> </div><!-- Service-5 --> <div class="col-md-4 col-sm-6 pd-15"> <div class="service-content"> <i class="icon-genius"></i> <h3>Free Updates</h3> <p>Lorem Ipsum is simply more dummy the industry.</p> </div> </div><!-- Service-6 --> </div> </div> </div> </div> </section><!-- service-section -->
<section id="works" class="portfolio-section bg-dark"> <div class="container-fluid"> <div class="row portfolio-wrap d-flex align-items-center"> <div class="col-md-4 xs-padding"> <div class="section-heading pdl-80"> <h2 class="mb-20">Portfolio</h2> <p class="mb-20">I’m a Creative Designer and I make things work.<br> Turning your dreams into reality.</p> <a href="#" class="default-btn">Our All Works</a> </div> </div> <div class="col-md-8"> <div class="row portfolio-items"> <div class="col-md-4 col-sm-6"> <div class="portfolio-box"> <div class="portfolio-thumb"> <img src="img/prtf-1.jpg" alt="img"> </div> <a href="img/prtf-1.jpg" class="hover img-popup" data-gall="galleryimg"><img src="img/zoom.png" alt="icon"></a> </div> </div><!-- Portfolio-1 --> <div class="col-md-4 col-sm-6"> <div class="portfolio-box"> <div class="portfolio-thumb"> <img src="img/prtf-2.jpg" alt="img"> </div> <a href="img/prtf-2.jpg" class="hover img-popup" data-gall="galleryimg"><img src="img/zoom.png" alt="icon"></a> </div> </div><!-- Portfolio-2 --> <div class="col-md-4 col-sm-6"> <div class="portfolio-box"> <div class="portfolio-thumb"> <img src="img/prtf-3.gif" alt="img"> </div> <a href="img/prtf-3.gif" class="hover img-popup" data-gall="galleryimg"><img src="img/zoom.png" alt="icon"></a> </div> </div><!-- Portfolio-3 --> <div class="col-md-4 col-sm-6"> <div class="portfolio-box"> <div class="portfolio-thumb"> <img src="img/prtf-4.jpg" alt="img"> </div> <a href="img/prtf-4.jpg" class="hover img-popup" data-gall="galleryimg"><img src="img/zoom.png" alt="icon"></a> </div> </div><!-- Portfolio-4 --> <div class="col-md-4 col-sm-6"> <div class="portfolio-box"> <div class="portfolio-thumb"> <img src="img/prtf-5.jpg" alt="img"> </div> <a href="img/prtf-5.jpg" class="hover img-popup" data-gall="galleryimg"><img src="img/zoom.png" alt="icon"></a> </div> </div><!-- Portfolio-5 --> <div class="col-md-4 col-sm-6"> <div class="portfolio-box"> <div class="portfolio-thumb"> <img src="img/prtf-6.jpg" alt="img"> </div> <a href="img/prtf-6.jpg" class="hover img-popup" data-gall="galleryimg"><img src="img/zoom.png" alt="icon"></a> </div> </div><!-- Portfolio-6 --> </div> </div> </div> </div> </section><!-- portfolio-section -->
<section class="cta-section padding"> <div class="container"> <div class="cta-wrap text-center"> <div class="cta-content"> <h2>A Creative studio in Melbourne, <br> passionate about design, art and <br>creativity, since 1950.</h2> <a href="#" class="default-btn">Contact With Us</a> </div> </div> </div> </section><!-- cta-section -->
<section id="contact" class="contact-section bg-dark"> <div class="container-fluid"> <div class="row contact-wrap"> <div class="col-md-6 pdl-80"> <div class="contact-info mb-30"> <h2>let's work together projects <br> just send me email here</h2> </div> <div class="contact-form"> <form action="contact.php" method="post" id="ajax_form" class="form-horizontal"> <div class="form-group colum-row row"> <div class="col-sm-6"> <input type="text" id="name" name="name" class="form-control" placeholder="Name" required> </div> <div class="col-sm-6"> <input type="email" id="email" name="email" class="form-control" placeholder="Email" required> </div> </div> <div class="form-group row"> <div class="col-md-12"> <textarea id="message" name="message" cols="30" rows="5" class="form-control message" placeholder="Message" required></textarea> </div> </div> <div class="form-group row"> <div class="col-md-12"> <button id="submit" class="default-btn submit-button" type="submit">Send Message</button> </div> </div> <div id="form-messages" class="alert" role="alert"></div> </form> </div> </div> </div> </div> <div id="google-map"></div><!-- /#google-map --> </section><!-- contat-section -->
These are the css files:
This theme use these Javascript files:
bootstrap.min.js smooth-scroll.min.js owl.carousel.min.js jquery-1.12.4.min.js owl.carousel.min.js venobox.min.js wow.min.js main.jsYou can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
TeamXcel